<script setup lang="tsx">
import { useModalStatus } from '/@lib/hooks/useModalStatus.ts'
import { useForm } from '/@lib/hooks/useForm.ts'
import { sys_common_status } from '/@/const/Options.ts'

const { modalVisible, modalTitle, showModal, hideModal, setModalTitle } = useModalStatus()
// const { loading, showLoading, hideLoading } = useLoading()
const formRef = ref()
const { form, resetForm } = useForm({
  id: undefined,
  tenantId: undefined,
  module: '',
  title: '',
  businessType: 0,
  businessTypes: undefined,
  method: '',
  requestMethod: '',
  operatorType: 0,
  operName: '',
  deptName: '',
  operUrl: '',
  operIp: '',
  operLocation: '',
  operParam: '',
  jsonResult: '',
  status: 0,
  errorMsg: '',
  operTime: '',
  costTime: 0,
  os: '',
  browser: '',
  userAgent: ''
})
const closeCancel = () => {
  formRef.value?.resetFields()
  resetForm()
  hideModal()
}
/** 打开 Modal 操作 */
const open = async (row: any) => {
  Object.assign(form, row)
  showModal()
  setModalTitle('操作日志详情')
}
defineExpose({ open })
</script>

<template>
  <!-- 添加或修改对话框 -->
  <el-dialog
    :title="modalTitle"
    v-model="modalVisible"
    width="80%"
    top="5vh"
    @close="closeCancel"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-descriptions :column="4" border>
      <el-descriptions-item label="模块功能" width="100" span="2">
        {{ form.module }} - {{ form.title }}
      </el-descriptions-item>
      <el-descriptions-item label="操作人" width="100">{{ form.operName }}</el-descriptions-item>
      <el-descriptions-item label="操作部门" width="100">{{ form.deptName }}</el-descriptions-item>
      <el-descriptions-item label="操作日期" width="120">{{ form.operTime }}</el-descriptions-item>
      <el-descriptions-item label="浏览器" width="100">{{ form.browser }}</el-descriptions-item>
      <el-descriptions-item label="操作系统" width="100" span="2">{{ form.os }}</el-descriptions-item>
      <el-descriptions-item label="IP" width="100">{{ form.operIp }}</el-descriptions-item>
      <el-descriptions-item label="IP地点" width="100">{{ form.operLocation }}</el-descriptions-item>
      <el-descriptions-item label="用户代理" width="100" span="2">{{ form.userAgent }}</el-descriptions-item>
      <el-descriptions-item label="方法名" width="100" span="2">{{ form.method }}</el-descriptions-item>
      <el-descriptions-item label="状态" width="100">
        <VipDictTag :options="sys_common_status" :value="form.status" />
      </el-descriptions-item>
      <el-descriptions-item label="耗时" width="100">{{ form.costTime }} ms</el-descriptions-item>
      <el-descriptions-item label="请求方式" width="100">{{ form.requestMethod }}</el-descriptions-item>
      <el-descriptions-item label="请求URL" width="100" span="3">{{ form.operUrl }}</el-descriptions-item>
      <el-descriptions-item label="请求参数" width="100" span="4">
        <!--        {{ form.operParam }}-->
        <pre>{{ form.operParam }}</pre>
      </el-descriptions-item>
      <el-descriptions-item label="返回参数" width="100" span="4">
        <!--        {{ form.jsonResult }}-->
        <!--        <pre>{{ form.jsonResult }}</pre>-->
        <pre>{{ JSON.parse(form.jsonResult || '{}') }}</pre>
      </el-descriptions-item>
      <el-descriptions-item label="异常信息" width="100" span="4">
        <!--        {{ form.errorMsg }}-->
        <el-input v-model="form.errorMsg" type="textarea" :rows="4" readonly />
      </el-descriptions-item>
    </el-descriptions>

    <!-- 底部按钮 -->
    <template #footer>
      <div>
        <el-button @click="closeCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  //white-space: -pre-wrap;
  white-space: -o-pre-wrap;
}
</style>
